<template>
  <div>
    <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="false"
      :isIndex="true" :isShowPage="false">
    </TableCompEle>
  </div>
</template>

<script>
import { getConfigChart, updateConfig } from '@/api/chart'
export default {
  data() {
    return {
      tableData: [{}],
      tableConfig: [
        {
          isEdit: true,
          isType: 'Input',
          prop: 'name',
          placeholder: '请输入',
          label: '态势名称'
        }
        // {
        //   isType: 'Input',
        //   prop: 'compName',
        //   placeholder: '请输入',
        //   label: '组件'
        // }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(120),
        operations: [
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            isShow: row => {
              return !row.isHandle
            },
            method: row => {
              this.$set(row, 'isHandle', true)
            }
          },
          {
            label: '保存',
            isLink: true,
            type: 'primary',
            isShow: row => {
              return row.isHandle
            },
            method: row => {
              this.saveFile(row)
            }
          },
          {
            label: '取消',
            isLink: true,
            type: 'primary',
            isShow: row => {
              return row.isHandle
            },
            method: row => {
              this.$set(row, 'isHandle', false)
              this.initData()
            }
          }
        ]
      }
    }
  },
  created() {
    this.initData()
  },
  mounted() { },
  methods: {
    initData() {
      getConfigChart().then(res => {
        this.tableData = res?.data ?? []
      })
    },
    saveFile(row) {
      console.log('[ row ] >', row)
      if (!row.name) {
        this.$message.error('名称不能为空！')
        return false
      }
      updateConfig(row).then(() => {
        this.$message.success('保存成功！')
        this.initData()
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>